<template>
    <view class="cart">
        <!-- 1 列表 -->
        <view class="cart-list">
            <view v-for="(item, index) in list" :key="item.goods_id" class="cart-item">
                <!-- 1 复选框 -->
                <view class="goods-chk">
                    <u-checkbox :value="item.checked" shape="circle" active-color="red" @change="changeCheck(index)">
                    </u-checkbox>
                </view>
                <!-- 2 图片 -->
                <view class="goods-img">
                    <u-image width="191rpx" height="191rpx" :src="item.goods_small_logo"></u-image>
                </view>
                <!-- 3 信息 -->
                <view class="goods-info">
                    <!-- 名称 -->
                    <view class="goods-name u-line-2">{{ item.goods_name }}</view>
                    <!-- 价格和数量 -->
                    <view class="goods-price-num">
                        <view class="goods-price">￥{{ item.goods_price }}</view>
                        <view class="goods-num-tool">
                            <view class="num-btn" @click="numChangel(index, -1)">-</view>
                            <view class="goods-num">{{ item.num }}</view>
                            <view class="num-btn" @click="numChangel(index, 1)">+</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 2 统计 -->
        <view class="statistics">
            <view class="all-chk">
                <u-checkbox shape="circle" active-color="red" :value="getCheckedAll" @change="allChecked">全选
                </u-checkbox>
            </view>
            <view class="all-price">
                合计: <text>￥{{ getTotalPice }}</text>
            </view>
            <view class="all-count">
                <u-button type="error" shape="circle" @click="Pay">去结算({{ getCheckedNum }})</u-button>
            </view>
        </view>
    </view>
</template>

<script>
// 引入辅助函数
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
    computed: {
        ...mapState('cart', ['list']),
        ...mapGetters('cart', ['getCheckedNum', "getTotalPice", 'getCheckedAll', 'getChecked']),
    },
    methods: {
        ...mapMutations('cart', ["goodChecked", 'allChecked', 'numChange', 'deleteGoods']),
        // 复选框事件
        changeCheck(index) {
            this.goodChecked(index)
        },
        // 加减数量
        async numChangel(index, num) {
            if (num === -1 && this.list[index].num === 1) {
                const [err, { confirm }] = await uni.showModal({
                    title: '提示',
                    content: '你确定要删除宝贝嘛',

                })
                if (confirm) {
                    this.deleteGoods(index)
                }

            } else {
                this.numChange({ index, num })
            }
        },
        Pay() {
            if (this.getCheckedNum) {
                uni.navigateTo({
                    url: '/pages/pay/pay'
                })

            } else {
                wx.showToast({
                    title: '还没有商品哦',
                    icon: 'none'
                })
            }
        }









    },
};
</script>

<style lang="scss">
.cart {
    padding-bottom: 111rpx;

    .cart-list {
        .cart-item {
            display: flex;
            padding: 10rpx;
            border-bottom: 1rpx solid #ccc;

            .goods-chk {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .goods-img {
                flex: 2;

                display: flex;
                align-items: center;
                justify-content: center;
            }

            .goods-info {
                color: #666;
                flex: 3;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .goods-name {}

                .goods-price-num {
                    display: flex;
                    justify-content: space-between;

                    .goods-price {
                        color: #eb4450;
                    }

                    .goods-num-tool {
                        width: 140rpx;
                        height: 40rpx;

                        display: flex;
                        justify-content: space-between;

                        .num-btn {
                            border: 1rpx solid #ccc;
                            border-radius: 50%;
                            width: 40rpx;
                            height: 40rpx;
                            text-align: center;
                            line-height: 40rpx;
                        }
                    }
                }
            }
        }
    }

    .statistics {
        position: fixed;
        background-color: #fff;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        border-top: 1rpx solid #ccc;
        display: flex;
        align-items: center;
        padding: 15rpx;

        .all-chk {}

        .all-price {
            flex: 1;
            color: #666;

            text {}
        }

        .all-count {}
    }
}
</style>
